<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        攻防情景训练检测数据
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成打斗攻防情景训练总人数</div>
                                    <div class="count pear-text">122</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">及格人数</div>
                                    <div class="count pear-text">93</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成袭警攻防情景训练总人数</div>
                                    <div class="count pear-text">153</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">及格人数</div>
                                    <div class="count pear-text">137</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成越狱攻防情景训练总人数</div>
                                    <div class="count pear-text">93</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">及格人数</div>
                                    <div class="count pear-text">67</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        急症情景训练检测数据
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成警员急症情景训练总人数</div>
                                    <div class="count pear-text">192</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">及格人数</div>
                                    <div class="count pear-text">180</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成服刑人员急症情景训练总人数</div>
                                    <div class="count pear-text">167</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">及格人数</div>
                                    <div class="count pear-text">144</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">警员急症情景训练救治有效率</div>
                                    <div class="count pear-text">85%</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">服刑人员急症情景训练救治有效率</div>
                                    <div class="count pear-text">77%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">攻防情景训练检测数据直方图</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records1" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">急症情景训练检测数据直方图</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records2" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--    <div class="layui-col-md4">-->
<!--       -->
<!--        <div class="layui-card">-->
<!--            <div class="layui-card-header">考核信息</div>-->
<!--            <div class="layui-card-body">-->
<!--                <table class="layui-table" lay-skin="line",style="min-height:500px">-->
<!--                    <thead>-->
<!--                    <tr>-->
<!--                        <th>参考人数</th>-->
<!--                        <th>100</th>-->
<!--                    </tr>-->
<!--                    </thead>-->
<!--                    <tbody>-->
<!--                    <tr>-->
<!--                        <th>得分最高人员</th>-->
<!--                        <th>帅小伙</th>-->
<!--                    </tr>    -->
<!--                    <tr>-->
<!--                        <th>得分最低人员</th>-->
<!--                        <th>丑小伙</th>-->
<!--                    </tr>-->

<!--                    <tr>-->
<!--                        <td>考试总场次</td>-->
<!--                        <td>{{ system_version }}</td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td>考核成绩合格人数</td>-->
<!--                        <td>94</td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td>考核成绩不合格人数</td>-->
<!--                        <td>6</td>-->
<!--                    </tr>-->
<!--                    </tbody>-->
<!--                </table>-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-records1');
        var myChart = echarts.init(chartDom);
        var option;
        
        const colors = ['#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75', '#EE6666'];
        option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['完成打斗攻防情景训练人数', '完成袭警攻防情景训练人数', '完成越狱攻防情景训练人数', '打斗训练及格人数', '袭警训练及格人数', '越狱训练及格人数']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} 人次'
              }
            }
<!--            {-->
<!--              type: 'value',-->
<!--              name: '人数',-->
<!--              position: 'right',-->
<!--              alignTicks: true,-->
<!--              offset: 80,-->
<!--              axisLine: {-->
<!--                show: true,-->
<!--                lineStyle: {-->
<!--                  color: colors[1]-->
<!--                }-->
<!--              },-->
<!--              axisLabel: {-->
<!--                formatter: '{value} 人次'-->
<!--              }-->
<!--            },-->
<!--            {-->
<!--              type: 'value',-->
<!--              name: '人数',-->
<!--              position: 'left',-->
<!--              alignTicks: true,-->
<!--              axisLine: {-->
<!--                show: true,-->
<!--                lineStyle: {-->
<!--                  color: colors[2]-->
<!--                }-->
<!--              },-->
<!--              axisLabel: {-->
<!--                formatter: '{value} 人次'-->
<!--              }-->
<!--            }-->
          ],
          series: [
            {
              name: '完成打斗攻防情景训练人数',
              type: 'bar',
              yAxisIndex: 0,
              data: [
                4, 6, 3, 9, 7, 5, 10, 26, 9, 5, 10, 6
              ]
            },
            {
              name: '完成袭警攻防情景训练人数',
              type: 'bar',
              yAxisIndex: 0,
              data: [
                5, 16, 7, 9, 7, 8, 13, 31, 10, 7, 12, 6
              ]
            },
            {
              name: '完成越狱攻防情景训练人数',
              type: 'bar',
              yAxisIndex: 0,
              data: [
                4, 5, 3, 7, 3, 5, 7, 20, 4, 5, 2, 6
              ]
            },
            {
              name: '打斗训练及格人数',
              type: 'line',
              yAxisIndex: 0,
              data: [4, 5, 3, 7, 3, 5, 7, 20, 4, 5, 2, 6]
            },
            {
              name: '袭警训练及格人数',
              type: 'line',
              yAxisIndex: 0,
              data: [4, 13, 7, 7, 6, 5, 12, 28, 9, 7, 11, 6]
            },
            {
              name: '越狱训练及格人数',
              type: 'line',
              yAxisIndex: 0,
              data: [2, 3, 3, 5, 3, 2, 4, 10, 4, 5, 1, 3]
            },
          ]
        };
        
        option && myChart.setOption(option);
        
        });
</script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-records2');
        var myChart = echarts.init(chartDom);
        var option;

        const colors = ['#5470C6', '#91CC75', '#5470C6', '#91CC75'];
        option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['完成警员急症情景训练总人数', '完成服刑人员急症情景训练总人数', '警员急症训练及格人数', '服刑人员急症训练及格人数']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} 人次'
              }
            }
<!--            {-->
<!--              type: 'value',-->
<!--              name: '人数',-->
<!--              position: 'left',-->
<!--              alignTicks: true,-->
<!--              offset: 80,-->
<!--              axisLine: {-->
<!--                show: true,-->
<!--                lineStyle: {-->
<!--                  color: colors[1]-->
<!--                }-->
<!--              },-->
<!--              axisLabel: {-->
<!--                formatter: '{value} 人次'-->
<!--              }-->
<!--            }-->
          ],
          series: [
            {
              name: '完成警员急症情景训练总人数',
              type: 'bar',
              yAxisIndex: 0,
              data: [
                2,5,8,12,24,57,35,14,12,9,8,6
              ]
            },
            {
              name: '完成服刑人员急症情景训练总人数',
              type: 'bar',
              yAxisIndex: 0,
              data: [
                2,5,6,11,19,45,35,14,9,7,5
              ]
            },
            {
              name: '警员急症训练及格人数',
              type: 'line',
              yAxisIndex: 0,
              data: [2,4,6,11,23,54,34,13,12,8,8,5]
            },
            {
              name: '服刑人员急症训练及格人数',
              type: 'line',
              yAxisIndex: 0,
              data: [2,4,5,9,15,39,31,12,6,6,5]
            },

          ]
        };

        option && myChart.setOption(option);

        });
</script>
</body>
</html>